<script lang="ts" setup>
import { formatDate } from '@/utils/timeUtils'
import type { Develop } from '@/request/api/develop'

const { data, showPlane } = defineProps({
  data: {
    type: Array<Develop>,
    required: true
  },
  showPlane: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <el-container
    v-for="item in data"
    :id="item.id"
    :key="item.id"
    class="p-5 gap-5"
    direction="vertical"
  >
    <el-container
      class="gap-2 use-second-bg min-h-80 items-start p-5 use-radius-sm use-shadow use-transitions-shadow-short"
      direction="vertical"
    >
      <el-container class="items-center min-h-16 gap-2">
        <el-avatar :size="50" :src="item.avatar" class="min-w-12" />
        <el-container class="gap-1 justify-between" direction="vertical">
          <a
            :href="item.home"
            class="text-xl use-hover-color use-transitions-colors-short"
            target="_blank"
            >{{ item.author }}</a
          >
          <span class="text-sm">{{ item.email }}</span>
        </el-container>
      </el-container>
      <span>分支：{{ item.branch }}</span>
      <span class="break-all">提交哈希：{{ item.sha }}</span>
      <span v-if="item.parentSha">上次提交哈希：{{ item.parentSha }}</span>
      <el-container class="h-full" direction="vertical">
        <pre class="break-words whitespace-pre-wrap">提交信息：{{ item.message }}</pre>
      </el-container>
      <span class="flex w-full gap-2 items-center justify-between flex-wrap">
        <SvgIcon :message="formatDate(item.time)" name="edit" />
        <a
          :href="item.url"
          class="flex py-1 px-2 use-radius-xs use-hover-color border use-transitions-colors-short ml-auto"
          target="_blank"
          >前往查看</a
        >
      </span>
    </el-container>
    <span v-if="showPlane" class="flex h-10 items-end w-full">
      <span class="flex w-full border-b-8 border-dotted" />
      <SvgIcon name="paper-plane" svg-class="!size-8 rotate-[30deg]" />
    </span>
  </el-container>
</template>

<style lang="scss" scoped></style>
